// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
// See the LICENCE file in the repository root for full licence text.

.beatmap-scoreboard-table {
  @_top: beatmap-scoreboard-table;
  @activated-row: ~"@{_top}__body-row--menu-active";
  @passive-row: ~"@{_top}__body-row--highlightable";

  @handle: 16px;
  @row-height: 1.8em;

  --default-color: #fff;
  --padding-h: 4px;
  --perfect-color: hsl(@beatmap-score--hsl-perfect);
  --row-background-color: hsl(var(--hsl-b4));
  --row-background-color-highlight: hsl(var(--hsl-b2));
  --zero-color: fade(#fff, 40%);

  // Safari performance on __popup-menu is very bad, otherwise.
  .own-layer();

  margin-right: -@handle;
  overflow-x: auto;

  @media @mobile {
    margin-right: 0;
  }

  &__table {
    width: 100%;
    min-width: 800px;
    font-size: 12px;
  }

  &__header {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0 var(--padding-h) 5px;
    color: @osu-colour-f1;

    // in order of columns
    &--rank {
      width: 40px;
      text-align: right;
    }

    &--grade {
      width: 70px;
    }

    &--score {
      width: 70px;
    }

    &--accuracy {
      width: 70px;
    }

    &--flag {
      width: 25px;
    }

    &--player {
      width: 180px;
    }

    &--maxcombo {
      width: 100px;
    }

    &--hitstat {
      max-width: 55px;
      min-width: 30px;
      white-space: nowrap;
    }

    &--hitstat-miss {
      width: 50px;
    }

    &--pp {
      width: 50px;
    }

    &--mods {
      min-width: 50px;
      padding-left: 5px;
    }

    &--popup-menu {
      width: @handle;
    }
  }

  &__body-row {
    &:nth-child(odd) {
      --row-background-color: hsl(var(--hsl-b3));
    }

    &:hover,
    &--menu-active {
      --zero-color: #fff;
    }

    // @passive-row
    &--highlightable {
      .@{_top}--menu-active & {
        pointer-events: none;
      }
    }

    // need to prioritize over :nth-child
    &&--friend {
      --row-background-color: fade(@yellow-dark, 20%);
      --row-background-color-highlight: lighten(fade(@yellow-dark, 20%), 20%);
    }

    &&--self {
      --row-background-color: fade(@green-dark, 30%);
      --row-background-color-highlight: lighten(fade(@green-dark, 30%), 20%);
    }
  }

  &__cell {
    background-color: var(--row-background-color);

    .@{_top}__body-row:hover &,
    .@{activated-row} & {
      background-color: var(--row-background-color-highlight);
    }

    &:first-child {
      // rounded corners for left side
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
    }

    &:nth-last-child(2) {
      // ...and right side
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px;
      width: 1%; // don't let the column expand unless required
    }

    &--player {
      max-width: 200px;
    }
  }

  &__cell-content {
    .link-plain();
    .link-hover({
      color: var(--default-color);
    });

    display: flex;
    height: @row-height;
    align-items: center;
    color: var(--default-color);
    padding: 0 var(--padding-h);
    gap: 5px;
    position: relative;

    &--bg-link {
      position: absolute;
      inset: 0;
    }

    &--grade {
      justify-content: center;
    }

    &--mods {
      padding-right: 10px;
    }

    &--perfect {
      --default-color: var(--perfect-color);
    }

    &--rank {
      font-weight: 700;
      justify-content: flex-end;
    }

    &--score {
      .@{_top}__body-row--first & {
        font-weight: 700;
      }
    }

    &--time {
      white-space: nowrap;
    }

    &--zero {
      --default-color: var(--zero-color);
    }
  }

  &__mods {
    display: flex;
    --mod-height: @mod-height-small;
  }

  &__popup-menu {
    position: relative;

    .@{activated-row} & {
      opacity: 1;
    }

    .@{passive-row} & {
      opacity: 0;

      @media @mobile {
        opacity: 1;
      }
    }

    .@{passive-row}:hover & {
      opacity: 1;
    }
  }

  &__user-link {
    .u-ellipsis-overflow();
    .link-inverted();
    .link-hover({
      text-decoration: underline;
    });
  }
}
